<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    pageContext.setAttribute("APP_PATH",request.getContextPath());
%>
<html>
<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.1/font/bootstrap-icons.css">
    <title>主页</title>
</head>
<body>
<%
    String username = (String) session.getAttribute("user");
    Integer id = (Integer) session.getAttribute("id");
%>
<h3 style="text-align: center; margin-top: 20px">欢迎您&nbsp;&nbsp;<%=username%>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <button class="btn btn-danger" id="logout">退出</button>
</h3>
<div class="container" style="margin-top: 100px">
    <div class="row" style="margin-bottom: 20px">
        <div class="col-md-4">
            <button class="btn btn-primary" style="outline: none;box-shadow: none" id="addTeacher">添加</button>&nbsp;&nbsp;
            <button class="btn btn-danger" style="outline: none;box-shadow: none" id="deleteTeacher">删除</button>&nbsp;&nbsp;
            <button class="btn btn-success" style="outline: none;box-shadow: none" id="refreshBtn">刷新</button>
            <button class="btn btn-info" style="outline: none;box-shadow: none; margin-left: 50px" id="seekStudents">学生信息</button>
        </div>
        <div class="col-md-4 col-md-offset-6">
        </div>
        <div class="col-md-4">
            <div class="input-group">
                <input id="keyWords" name="keyWords" type="text" class="form-control" placeholder="关键词">
                <span class="input-group-btn">
                    <button class="btn btn-primary" type="button" style="outline: none;box-shadow: none" id="searchBtn">搜索</button>
                </span>
            </div>
        </div>
    </div>
    <div>
        <table class="table table-striped" id="student_table">
            <thead>
            <tr style="text-align: center">
                <th>
                    <input type="checkbox" id="check_all">
                </th>
                <th scope="col">id</th>
                <th scope="col">账号</th>
                <th scope="col">密码</th>
                <th scope="col">操作</th>
            </tr>
            </thead>
            <tbody id="tbody" style="text-align: center"></tbody>
        </table>
    </div>
</div>
<div class="modal fade" tabindex="-1" role="dialog" id="editTeacherModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body">
                <form class="editTeacherForm">
                    <div class="form-group">
                        <label>账号</label>
                        <input name="username" type="text" class="form-control" id="editUsername">
                    </div>
                    <div class="form-group">
                        <label>密码</label>
                        <input name="password" type="text" class="form-control" id="editPassword">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="saveEditTeacher">保存</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<div class="modal fade" tabindex="-1" role="dialog" id="addTeacherModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body">
                <form class="addTeacherForm">
                    <div class="form-group">
                        <label>账号</label>
                        <input required name="username" type="text" class="form-control" id="addUsername">
                    </div>
                    <div class="form-group">
                        <label>密码</label>
                        <input required name="password" type="text" class="form-control" id="addPassword">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="addTeacherBtn">添加</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


</body>
</html>

<script>

    $(function (){
        getTeacherList()
    })

    $("#refreshBtn").click(function (){
        getTeacherList()
    })

    function getTeacherList(){
        $.ajax({
            url: "${APP_PATH}/getTeacherList",
            type: "GET",
            success: function (res){
                var data = JSON.parse(res)
                console.log(data)
                bulidTeacherTable(data.extend.data)
            }
        })
    }

    function bulidTeacherTable(res){
        $("#student_table tbody").empty()
        $("#tbody").empty()
        var info = res
        $.each(res, function (index, item){
            var checkBox = $("<td><input type='checkbox' class='check_item' /></td>")
            var id = $("<td></td>").append(item.id)
            var username = $("<td></td>").append(item.username)
            var password = $("<td></td>").append(item.password)

            var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm edit_btn")
                .append($("<span></span>").addClass("bi bi-pencil-square"))
            editBtn.attr("edit_id",item.id)
            var delBtn = $("<button></button>").addClass("btn btn-danger btn-sm del_btn")
                .append($("<span></span>").addClass("bi bi-trash-fill"))
            delBtn.attr("del_id",item.id)
            var btntd = $("<td></td>").append(editBtn).append("  ").append(delBtn)
            $("<tr></tr>").append(checkBox).append(id).append(username).append(password).append(btntd).appendTo("#student_table tbody")
        })
    }

    //编辑查看
    $(document).on("click",".edit_btn",function (){
        console.log($(this).attr("edit_id"))
        getTeacherById($(this).attr("edit_id"))
        $("#editTeacherModal").modal('show')
    })

    // 将表单渲染到编辑模态框
    function getTeacherById(id){
        $.ajax({
            url: "${APP_PATH}/getTeacherById",
            data: {"id": id},
            method: "GET",
            success: function (res){
                // console.log(res)
                var data = JSON.parse(res)
                console.log(data)
                $("#editUsername").val(data.extend.data.username)
                $("#editPassword").val(data.extend.data.password)
            }
        })
    }

    // 保存编辑的信息
    $("#saveEditTeacher").click(function (){

        $.ajax({
            url: "${APP_PATH}/getTeacherByName",
            data: {"name": $("#editUsername").val() },
            method: "POST",
            success: function (res){
                var data = JSON.parse(res)
                if(data.code === 200){
                    alert("该账号已存在")
                }else if(data.code === 202){
                    $.ajax({
                        url: "${APP_PATH}/editTeacherInfo",
                        data: $(".editTeacherForm").serialize()+"&id="+<%=id%>,
                        method: "POST",
                        success: function (res){
                            var json = JSON.parse(res)
                            console.log(json.code)
                            if(json.code === 200){
                                alert("修改成功")
                                $("#editTeacherModal").modal('hide')
                                getTeacherList()
                            }
                        }
                    })
                }
            }
        })
    })


    // 添加老师信息
    $("#addTeacher").click(function (){
        $("#addTeacherModal").modal('show')
    })
    $("#addTeacherBtn").click(function (){

        $.ajax({
            url: "${APP_PATH}/getTeacherByName",
            data: {"name": $("#addUsername").val() },
            method: "POST",
            success: function (res){
                var data = JSON.parse(res)
                if(data.code === 200){
                    alert("该账号已存在")
                }else if(data.code === 202){
                    $.ajax({
                        url: "${APP_PATH}/addTeacher",
                        method: "POST",
                        data: $(".addTeacherForm").serialize(),
                        success: function (res){
                            var data = JSON.parse(res)
                            console.log(data)
                            if(data.code === 200){
                                alert("添加成功")
                                $("#addTeacherModal").modal('hide')
                                getTeacherList()
                                $(".addTeacherForm input").each(function (){
                                    $(this).val("")
                                })
                            }
                        }
                    })
                }
            }
        })

    })



    // 删除一个
    $(document).on('click', ".del_btn", function (){
        var username = $(this).parents("tr").find("td:eq(2)").text()
        var id = $(this).attr("del_id")
        if(confirm("确认删除【"+username+"】吗？")){
            $.ajax({
                url: "${APP_PATH}/delTeacherById",
                data: {"id": id},
                method: "POST",
                success: function (res){
                    var data = JSON.parse(res)
                    console.log(data)
                    if(data.code === 200){
                        alert("删除成功")
                        getTeacherList()
                    }
                }
            })
        }
    })

    // 批量删除

    // 全选
    $("#check_all").click(function (){
        $(".check_item").prop("checked", $(this).prop("checked"))
    })

    // 多选
    $(document).on('click', ".check_item", function (){
        //判断当前选中的是否时整个页面数据个数
        var flag = $(".check_item:checked").length === $(".check_item").length
        $("#check_all").prop("checked", flag)
    })

    // 批量删除
    $("#deleteTeacher").click(function (){
        var del_ids = ""
        //获取要删除的id
        $.each($(".check_item:checked"), function (){
            del_ids += $(this).parents("tr").find("td:eq(1)").text()+"-"
        })
        del_ids = del_ids.substring(0, del_ids.length-1)
        console.log(del_ids)
        if(confirm("确认删除所选的老师吗？")){
            $.ajax({
                url: "${APP_PATH}/delTeacherByIds",
                method: "POST",
                data: {"ids": del_ids},
                success: function (res){
                    var data = JSON.parse(res)
                    console.log(data)
                    if(data.code === 200){
                        alert("删除成功")
                        getTeacherList()
                    }
                }
            })
        }
    })

    // 保存编辑的信息
    <%--$("#saveEditTeacher").click(function (){--%>

    <%--    $.ajax({--%>
    <%--        url: "${APP_PATH}/saveEditTeacher",--%>
    <%--        data: $(".editTeacherForm").serialize(),--%>
    <%--        method: "POST",--%>
    <%--        success: function (res){--%>
    <%--            var json = JSON.parse(res)--%>
    <%--            console.log(json.code)--%>
    <%--            if(json.code === 200){--%>
    <%--                alert("修改成功")--%>
    <%--                $("#editTeacherModal").modal('hide')--%>
    <%--                getTeacherList()--%>
    <%--            }--%>
    <%--        }--%>
    <%--    })--%>
    <%--})--%>




    $("#logout").click(function (){
        window.location.href = "${APP_PATH}/login.jsp"
    })

    $("#seekStudents").click(function (){
        window.location.href = "${APP_PATH}/jsp/admin/adminHome.jsp"
    })
</script>


